<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <canvas id="canvas" width="500" height="500" style="background-color: #000;">
	your browser not support canvas!
    </canvas>

   <script type="text/javascript" src="../js/utils.js"></script>
   <script type="text/javascript" src="../js/ball.js"></script>
   <script>
      window.onload = function(){
          var canvas = document.getElementById('canvas'),
              context = canvas.getContext('2d'),
              ball = new Ball(),
              mouse = utils.captureMouse(canvas),
              spring = 0.03,
              f = 0.95,
              gravity = 2,
              vx = 0,vy = 0;
    
        
          function drawLine(){
              context.strokeStyle = "#fff";
              context.beginPath();
              context.moveTo(mouse.x, mouse.y);
              context.lineTo(ball.x, ball.y);
              context.closePath();
              context.stroke();
          }
          
          (function drawFrame(){
              window.requestAnimationFrame(drawFrame, canvas);
              context.clearRect(0, 0, canvas.width, canvas.height);
              
              var dx = mouse.x - ball.x;
              var dy = mouse.y - ball.y;
              
              var ax = dx * spring;
              var ay = dy * spring;
              
              vx += ax;
              vy += ay;
              vy += gravity;
              
              vx *= f;
              vy *= f;
              
              ball.x += vx;
              ball.y += vy;
              
              drawLine();
              
              ball.draw(context);
              
          }());
             
      }
    </script>
    
</body>
</html>